<template>
  <div class="apiListContainer">
    <div class="header">
      <div class="logo">
        <img :src="logo" class="sidebar-logo">
        <h1 class="sidebar-title">{{ $t('system.name') }}</h1>
        <span class="txt">&nbsp;&nbsp;|&nbsp;&nbsp;API文档</span>
      </div>
    </div>
    <section class="apiListMain">
      <div class="apiList">
        <el-row class="container">
          <el-col :span="5" class="col">
            <div class="position">
              <el-scrollbar wrap-class="scrollbar-wrapper">
                <el-menu :default-active="menuActive" active-background-color="#fff">
                  <el-submenu index="system">
                    <template slot="title">
                      <!-- <i class="el-icon-setting" /> -->
                      <span class="menuTitle">{{ $t('apiList.system') }}</span>
                    </template>
                    <el-menu-item
                      v-for="item in systemMenus"
                      :key="item.id"
                      :index="item.id"
                      @click="toDetail(item)"
                    ><span slot="title">{{ item.text }}</span></el-menu-item>
                  </el-submenu>
                  <el-submenu index="api">
                    <template slot="title">
                      <!-- <i class="el-icon-menu" /> -->
                      <span class="menuTitle">{{ $t('apiList.APIClass') }}</span>
                    </template>
                    <el-menu-item v-for="item in menus" :key="item.id" :index="item.id" @click="clickedMenu(item)">
                      <span slot="title">{{ item.text }}</span>
                    </el-menu-item>
                  </el-submenu>
                </el-menu>
              </el-scrollbar>
            </div>
          </el-col>
          <el-col :span="19" class="col">
            <el-scrollbar wrap-class="scrollbar-wrapper">
              <transition name="fade-transform" mode="out-in">
                <router-view :key="key" />
              </transition>
            </el-scrollbar>
          </el-col>
        </el-row>
      </div>
    </section>
  </div>
</template>
<script>
import logoPng from '@/assets/images/logo.png'
import { getDictList } from '@/api/dict-data'
export default {
  name: 'ApiListMain',
  data() {
    return {
      logo: logoPng,
      menuActive: null,
      systemMenus: [
        {
          id: 'OpenApiAccess',
          text: '服务调用方',
          title: '调用说明',
        },
        {
          id: 'OpenApiGuide',
          text: '服务提供方',
          title: '接入指引',
        },
        {
          id: 'OpenApiParam',
          text: '接口参数',
        },
        {
          id: 'OpenApiSign',
          text: '安全方式',
        },
        {
          id: 'OpenApiCode',
          text: '响应码查询',
        },
      ],
      menus: [],
      query: this.$route.query,
      id: this.$route.params.id || this.$route.query.id || null,
    }
  },
  computed: {
    key() {
      return this.$route.path
    },
  },
  mounted() {
    this.menuActive = this.id
    this.queryDict()
  },
  methods: {
    queryDict() {
      getDictList('INF_WITH_GROUP').then(({ data }) => {
        this.menus = data
        console.log(this.id)
        if (!this.query.title && !this.id) {
          this.clickedMenu(data[0])
        }
      })
    },
    toDetail(cell) {
      this.menuActive = cell.id
      this.$router.push({ name: cell.id, query: { id: cell.id, title: cell.title || cell.text }})
    },
    clickedMenu(cell) {
      this.menuActive = cell.id
      this.$router.push({ name: 'OpenApiList', params: { id: cell.id }, query: { title: cell.text }})
    },
  },
}
</script>
<style></style>
<style scoped lang="scss">
.header {
  background: rgb(23, 28, 55);
  height: 70px;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  min-width: 1200px;
  .logo {
    display: flex;
    align-items: center;
    width: 80%;
    margin: 0 auto;
    height: 100%;
    img {
      height: 60%;
      width: auto;
    }
    .txt {
      color: #fff;
      font-size: 14px;
    }
    .sidebar-title {
      color: #fff;
      font-size: 20px;
      margin: 0 0 0 20px;
    }
  }
}
.apiListContainer {
  min-width: 1200px;
  background-color: rgb(237, 241, 245);
  overflow-y: hidden;
  overflow-x: auto;
  // height: 100vh;
}
.apiListMain {
  height: 100vh;
  box-sizing: border-box;
  padding-top: 70px;
  width: 80%;
  margin: 0 auto;
  // margin: 10px auto auto;
}
.apiList {
  position: relative;
  border-radius: 4px;
  // padding: 20px;
  min-height: 100%;
  .container {
    position: absolute;
    left: 0;
    top: 10px;
    right: 0;
    bottom: 0;
    z-index: 1;
    // overflow: hidden;
  }
  .position {
    height: 100%;
    width: 100%;
    overflow-x: hidden;
    // height: calc(100% - 45px);
    border-right: solid 1px #e6e6e6;
  }
  .el-scrollbar {
    height: 100%;
  }
  .col {
    background: #fff;
    height: 100%;
  }
  .menuTitle {
    padding-left: 10px;
    padding-top: 20px;
    margin: 0 0 10px;
  }
}
.menuTitle {
  font-weight: 700;
  font-size: 14px;
  color: #000;
}
</style>
<style lang="scss">
.apiList {
  .scrollbar-wrapper {
    overflow-x: hidden !important;
  }
  .el-menu {
    border-right: none; //solid 1px #e6e6e6;
  }
  .tableHeaderGrey {
    th {
      background-color: rgb(243, 244, 247);
      color: rgb(85, 85, 85);
    }
  }
}
</style>
